<template>
<div>
    <div class="login-head">
        <div class="login-left">
            <router-link to='/'>
                    <div class="btn-back"></div>
            </router-link>
        </div>
        <div class="login-title">
            <h4>美团网</h4>
        </div>
    </div>
    <div class="login-box">
        <h4 class="login-titles">美团账号登录</h4>
        <div class="while">
            <input type="text" class="usename" placeholder="账户名/手机号/Email"></input>
            <input type="text" class="password" placeholder="请输入您的密码"></input>
        </div> 
        <button class="btn">登录</button>
        <label class="left" @click="registerbtn">立即注册</label>
        <label class="right">找回密码</label>
    </div>
    
</div>
</template>
<script>
export default{
    methods:{
        registerbtn(){
            this.$router.push({path:'/register'});
        }
    }
}
</script>
<style>
*{
    margin:0;
    padding:0;
    list-style: none;
}
body {
    background-color: #f0f0f0;
    font-family: "微软雅黑";
    font-size: 14px;
    color: #444;
}
.login-head{
    background-color: #06c1ae;
    color: #fff;
    height: 50px;
    line-height: 50px;
    width: 100%;
    border-bottom: 1px solid #21897d;
}
.login-head .login-left{
    float:left;
    width:60px;
    height: 50px;
}
.login-head .login-left .btn-back{
    margin-top:15px;
    margin-left:20px;
    transform:rotate(45deg);
    width:20px;
    height:20px;
    border-left:4px solid #fff;
    border-bottom:4px solid #fff;
}
.login-head .login-title{
    float:left;
    margin-left:100px;
    height: 50px;
    width:80px;
    text-align:center;
}
.login-head .login-title h4{
    line-height:50px;
    color:#fff;
    font-size:16px
}
.login-box{
    width:100%;
    height:220px;
    position:relative;
}
.while{
    margin-top:10px;
    width:100%;
    height:86px;
    background-color:#fff;
    margin-bottom:20px;
}
.login-box .login-titles{
    color:#06c1ae;
    margin-top:10px;
    font-size:18px;
}
.login-box .usename{
    width:100%;
    height:43px;
    margin-left:13px;
    border:0;
    font-size:17px;
    border-bottom:1px solid #DDD8CE;
}
.login-box .password{
    width:100%;
    height:43px;
    padding-left:13px;
    border:0;
    font-size:17px;
}
.login-box .btn{
    margin-left:1%;;
    width:94%;
    height:45px;
    border:0;
    color: #fff;
    background-color: #06c1ae;
    font-size:20px;
    border-radius:5px;
}
.login-box .left{
    position:absolute;
    bottom:0;
    left:10px;
    color: #06c1ae;
}
.login-box .right{
    position:absolute;
    bottom:0;
    right:10px;
    color: #06c1ae;
}
</style>